<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const orderList = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const getOrderList = async () => {
  loading.value = true
  try {
    const res = await axios.get('/carRepair/admin/financeManage/repairOfferOrderPageList', {
      params: {
        pageNum: page.value,
        pageSize: pageSize.value
      }
    })
    if (res.data.code === 200) {
      orderList.value = res.data.data.records
      total.value = res.data.data.total
    }
  } catch (e) {
    ElMessage.error('获取订单失败')
  } finally {
    loading.value = false
  }
}

const handleOffer = async (row) => {
  try {
    const res = await axios.put('/carRepair/admin/financeManage/repairOffer', {
      repairId: row.repairId,
      budgetAmount: row.budgetAmount
    })
    if (res.data.code === 200) {
      ElMessage.success('报价成功')
      getOrderList()
    }
  } catch (e) {
    ElMessage.error('报价失败')
  }
}

const getFirstImage = (urls) => {
  if (!urls) return ''
  return urls.split(',')[0]
}
const getImageList = (urls) => {
  if (!urls) return []
  return urls.split(',')
}
onMounted(() => {
  getOrderList()
})
</script>

<template>
  <div class="deposit-manage">
    <el-card>
      <el-table :data="orderList" style="width: 100%" v-loading="loading">
        <el-table-column label="故障拍照" width="120">
          <template #default="scope">
            <el-image style="width: 80px; height: 80px" :src="getFirstImage(scope.row.problemImgUrls)" :preview-src-list="getImageList(scope.row.problemImgUrls)" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="problemDesc" label="故障描述" />
        <el-table-column prop="accountName" label="账户名称" width="120" />
        <el-table-column prop="brand" label="品牌" width="100" />
        <el-table-column prop="model" label="车型" width="120" />
        <el-table-column prop="plateNumber" label="车牌号" width="120" />
        <el-table-column prop="mileage" label="当前里程数" width="120" />
        <el-table-column prop="createTime" label="故障单创建时间" width="180" />
        <el-table-column prop="budgetAmount" label="维修预算金额" width="140">
          <template #default="scope">
            <el-input v-model="scope.row.budgetAmount" type="number" size="small" style="width:100px" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleOffer(scope.row)">重新报价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getOrderList"
          @current-change="getOrderList"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.deposit-manage {
  padding: 0px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>